<!-- src/components/AshCommon/TopSearchForm.vue -->
<template>
  <div>
    <el-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      :label-width="labelWidth"
      label-position="right"
      :inline="true"
    >
      <template v-for="item in formConfig">
        <el-form-item
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :rules="rules[item.prop]"
        >
          <component
            :style="item.style || { width: '180px' }"
            :placeholder="item.placeholder"
            v-if="item.type === 'select'"
            :is="getComponent(item.type)"
            v-model="formData[item.prop]"
            v-bind="item.attrs"
            @change="handleChange(item, $event)"
            @click="handleClick(item, $event)"
            :disabled="item.disabled"
            clearable
            :type="item.type === 'textarea' ? 'textarea' : undefined"
          >
            <template v-if="item.type === 'select'">
              <el-option
                v-for="opt in getOptions(item)"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </template>
          </component>

          <el-checkbox-group
            :style="item.style || { width: '180px' }"
            v-else-if="item.type === 'checkbox'"
            v-model="formData[item.prop]"
            v-bind="item.attrs"
            @change="handleChange(item, $event)"
          >
            <el-checkbox
              v-for="opt in getOptions(item)"
              :key="opt.value"
              :label="opt.value"
              :disabled="item.disabled"
            >
              {{ opt.label }}
            </el-checkbox>
          </el-checkbox-group>

          <el-radio-group
            :style="item.style || { width: '180px' }"
            v-else-if="item.type === 'radio'"
            v-model="formData[item.prop]"
            v-bind="item.attrs"
            @change="handleChange(item, $event)"
          >
            <el-radio
              v-for="opt in getOptions(item)"
              :key="opt.value"
              :label="opt.value"
              :disabled="item.disabled"
            >
              {{ opt.label }}
            </el-radio>
          </el-radio-group>

          <el-date-picker
            :style="item.style || { width: '180px' }"
            v-else-if="
              item.type === 'date' ||
              item.type === 'daterange' ||
              item.type === 'datetime'
            "
            v-model="formData[item.prop]"
            :type="item.type"
            :placeholder="item.placeholder"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            v-bind="item.attrs || {}"
            @change="handleChange(item, $event)"
            :disabled="item.disabled"
            clearable
          />
          <component
            :style="item.style || { width: '180px' }"
            :placeholder="item.placeholder"
            v-else
            :is="getComponent(item.type)"
            v-model="formData[item.prop]"
            v-bind="item.attrs || {}"
            @change="handleChange(item, $event)"
            :disabled="item.disabled"
            clearable
            :type="item.type === 'textarea' ? 'textarea' : undefined"
          >
          </component>
        </el-form-item>
        <!-- </el-col> -->
      </template>
      <!-- 默认操作按钮 -->
      <el-form-item label=" ">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>

      <!-- 可插入自定义按钮 -->
      <slot name="actions" />
      <!-- </el-row> -->
    </el-form>
  </div>
</template>

<script>
export default {
  name: "TopSearchForm",
  props: {
    labelWidth: {
      type: String,
      default: "100px",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    value: {
      type: Object,
      required: true,
    },
    formConfig: {
      type: Array,
      required: true,
    },
    dynamicOptions: {
      type: Object,
      default: () => ({}),
    },
    rules: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: { ...this.value },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.formData = { ...val };
      },
      deep: true,
    },
    formData: {
      handler(val) {
        this.$emit("input", val);
      },
      deep: true,
    },
  },
  methods: {
    isRequired(item) {
      return Array.isArray(item.rules) && item.rules.some((r) => r.required);
    },
    getComponent(type) {
      const map = {
        input: "el-input",
        select: "el-select",
        radio: "el-radio-group",
        checkbox: "el-checkbox-group",
        switch: "el-switch",
        date: "el-date-picker",
        number: "el-input-number",
        textarea: "el-input",
      };
      return map[type] || "el-input";
    },
    getOptions(item) {
      if (item.options && item.options.length) {
        return item.options;
      }
      if (item.optionsKey && this.dynamicOptions[item.optionsKey]) {
        return this.dynamicOptions[item.optionsKey].map((opt) => ({
          label: opt[item.optionLabel || "label"],
          value: opt[item.optionValue || "value"],
        }));
      }
      return [];
    },
    handleChange(item, val) {
      this.$emit("change", { field: item.prop, value: val, item });
    },
    handleClick(item, event) {
      if (item.click) item.click(event, this.formData);
      this.$emit("click", { field: item.prop, event, item });
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate((valid) => {
          if (valid) resolve(this.formData);
          else reject(new Error("校验失败"));
        });
      });
    },
    reset() {
      this.$refs.formRef.resetFields();
      this.search(); // 重置后自动查询
      this.$emit("reset");
    },
    search() {
      console.log("chaxun ", this.formData);
      this.$emit("search", this.formData);
    },
  },
};
</script>
